<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-left" size="20" color="#333"></u-icon>
			</view>
			<view class="nav-title">秒杀专区</view>
			<view class="nav-right">
				<u-icon name="search" size="20" color="#333" @click="showSearch"></u-icon>
				<u-icon name="more-dot-fill" size="20" color="#333" @click="showMore"></u-icon>
			</view>
		</view>

		<!-- 秒杀倒计时区域 -->
		<view class="flash-countdown-section">
			<view class="countdown-header">
				<u-icon name="fire-fill" size="24" color="#FF4444"></u-icon>
				<text class="countdown-title">限时秒杀</text>
				<text class="countdown-subtitle">距离结束还剩</text>
			</view>
			<view class="countdown-timer">
				<view class="time-item">
					<text class="time-number">{{ countdown.hours }}</text>
					<text class="time-label">时</text>
				</view>
				<text class="time-separator">:</text>
				<view class="time-item">
					<text class="time-number">{{ countdown.minutes }}</text>
					<text class="time-label">分</text>
				</view>
				<text class="time-separator">:</text>
				<view class="time-item">
					<text class="time-number">{{ countdown.seconds }}</text>
					<text class="time-label">秒</text>
				</view>
			</view>
			<view class="flash-tips">
				<u-icon name="info-circle-fill" size="16" color="#FFD700"></u-icon>
				<text class="tips-text">秒杀商品限量供应，先到先得！</text>
			</view>
		</view>

		<!-- 秒杀时段选择 -->
		<view class="time-slots-section">
			<scroll-view class="time-slots-scroll" scroll-x="true">
				<view class="time-slots-container">
					<view 
						class="time-slot-item" 
						:class="{ active: currentTimeSlot === item.id }"
						v-for="(item, index) in timeSlots" 
						:key="index"
						@click="onTimeSlotChange(item.id)"
					>
						<text class="slot-time">{{ item.time }}</text>
						<text class="slot-status" :class="item.status">{{ item.statusText }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 筛选标签 -->
		<view class="filter-section">
			<scroll-view class="filter-scroll" scroll-x="true">
				<view class="filter-tags">
					<view 
						class="filter-tag" 
						:class="{ active: currentFilter === item.value }"
						v-for="(item, index) in filterTags" 
						:key="index"
						@click="onFilterChange(item.value)"
					>
						{{ item.label }}
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 秒杀商品列表 -->
		<view class="flash-products">
			<view 
				class="flash-product-item" 
				v-for="(item, index) in filteredProducts" 
				:key="index"
				@click="onProductClick(item)"
			>
				<image :src="item.img" class="product-img" mode="aspectFill"></image>
				<view class="product-info">
					<text class="product-title">{{ item.title }}</text>
					<view class="price-section">
						<text class="flash-price">¥{{ item.flashPrice }}</text>
						<text class="original-price">¥{{ item.originalPrice }}</text>
						<text class="discount-tag">{{ item.discount }}折</text>
					</view>
					<view class="stock-section">
						<view class="stock-progress">
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: item.soldPercent + '%' }"></view>
							</view>
							<text class="stock-text">已抢{{ item.soldCount }}/{{ item.totalStock }}</text>
						</view>
						<view class="buy-btn" :class="{ soldout: item.soldPercent >= 100 }" @click.stop="onBuyNow(item)">
							<text v-if="item.soldPercent >= 100">已抢完</text>
							<text v-else>立即抢购</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore">
			<u-loading-icon mode="spinner" size="20"></u-loading-icon>
			<text class="load-text">加载中...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentFilter: 'all',
				currentTimeSlot: 1,
				filterTags: [
					{ label: '全部', value: 'all' },
					{ label: '数码', value: 'digital' },
					{ label: '服装', value: 'clothing' },
					{ label: '美妆', value: 'beauty' },
					{ label: '家居', value: 'home' },
					{ label: '食品', value: 'food' }
				],
				timeSlots: [
					{ id: 1, time: '10:00', status: 'active', statusText: '抢购中' },
					{ id: 2, time: '14:00', status: 'upcoming', statusText: '即将开始' },
					{ id: 3, time: '18:00', status: 'upcoming', statusText: '即将开始' },
					{ id: 4, time: '20:00', status: 'upcoming', statusText: '即将开始' },
					{ id: 5, time: '22:00', status: 'upcoming', statusText: '即将开始' }
				],
				productList: [
					{
						id: 1,
						img: '/static/logo.png',
						title: 'iPhone 15 Pro Max 256GB',
						flashPrice: '7999.00',
						originalPrice: '9999.00',
						discount: '8.0',
						category: 'digital',
						soldCount: 85,
						totalStock: 100,
						soldPercent: 85
					},
					{
						id: 2,
						img: '/static/logo.png',
						title: '华为Mate 60 Pro 512GB',
						flashPrice: '6999.00',
						originalPrice: '8999.00',
						discount: '7.8',
						category: 'digital',
						soldCount: 92,
						totalStock: 100,
						soldPercent: 92
					},
					{
						id: 3,
						img: '/static/logo.png',
						title: 'SK-II神仙水230ml',
						flashPrice: '599.00',
						originalPrice: '1599.00',
						discount: '3.7',
						category: 'beauty',
						soldCount: 100,
						totalStock: 100,
						soldPercent: 100
					},
					{
						id: 4,
						img: '/static/logo.png',
						title: 'Nike Air Jordan 1 高帮',
						flashPrice: '899.00',
						originalPrice: '1299.00',
						discount: '6.9',
						category: 'clothing',
						soldCount: 78,
						totalStock: 100,
						soldPercent: 78
					},
					{
						id: 5,
						img: '/static/logo.png',
						title: '戴森V15吸尘器',
						flashPrice: '2999.00',
						originalPrice: '4599.00',
						discount: '6.5',
						category: 'home',
						soldCount: 45,
						totalStock: 100,
						soldPercent: 45
					},
					{
						id: 6,
						img: '/static/logo.png',
						title: '茅台飞天53度500ml',
						flashPrice: '1499.00',
						originalPrice: '2499.00',
						discount: '6.0',
						category: 'food',
						soldCount: 100,
						totalStock: 100,
						soldPercent: 100
					}
				],
				countdown: {
					hours: '02',
					minutes: '15',
					seconds: '30'
				},
				hasMore: false
			}
		},
		computed: {
			filteredProducts() {
				if (this.currentFilter === 'all') {
					return this.productList;
				}
				return this.productList.filter(item => item.category === this.currentFilter);
			}
		},
		onLoad() {
			console.log('秒杀专区页面加载');
			this.startCountdown();
			this.loadFlashSaleProducts();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loadFlashSaleProducts();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 加载秒杀数据
			loadFlashSaleProducts() {
				console.log('加载秒杀数据');
				
				// 模拟API调用
				// uni.request({
				//   url: 'your-api-url/flash-sale',
				//   method: 'GET',
				//   success: (res) => {
				//     this.productList = res.data;
				//   },
				//   fail: (err) => {
				//     console.error('获取秒杀数据失败:', err);
				//   }
				// });
			},
			
			// 开始倒计时
			startCountdown() {
				this.countdownTimer = setInterval(() => {
					let seconds = parseInt(this.countdown.seconds);
					let minutes = parseInt(this.countdown.minutes);
					let hours = parseInt(this.countdown.hours);
					
					seconds--;
					if (seconds < 0) {
						seconds = 59;
						minutes--;
						if (minutes < 0) {
							minutes = 59;
							hours--;
							if (hours < 0) {
								// 倒计时结束
								clearInterval(this.countdownTimer);
								this.countdown = { hours: '00', minutes: '00', seconds: '00' };
								uni.showToast({
									title: '秒杀活动已结束',
									icon: 'none'
								});
								return;
							}
						}
					}
					
					this.countdown = {
						hours: hours.toString().padStart(2, '0'),
						minutes: minutes.toString().padStart(2, '0'),
						seconds: seconds.toString().padStart(2, '0')
					};
				}, 1000);
			},
			
			// 时段切换
			onTimeSlotChange(slotId) {
				this.currentTimeSlot = slotId;
				// 这里可以根据时段加载不同的商品
				this.loadFlashSaleProducts();
			},
			
			// 筛选变化
			onFilterChange(filter) {
				this.currentFilter = filter;
			},
			
			// 立即抢购
			onBuyNow(item) {
				if (item.soldPercent >= 100) {
					uni.showToast({
						title: '商品已抢完',
						icon: 'none'
					});
					return;
				}
				
				uni.showModal({
					title: '确认抢购',
					content: `确定要抢购 ${item.title} 吗？`,
					success: (res) => {
						if (res.confirm) {
							// 模拟抢购请求
							uni.showLoading({
								title: '抢购中...'
							});
							
							setTimeout(() => {
								uni.hideLoading();
								// 更新库存
								item.soldCount++;
								item.soldPercent = Math.floor((item.soldCount / item.totalStock) * 100);
								
								uni.showToast({
									title: '抢购成功！',
									icon: 'success'
								});
							}, 1500);
						}
					}
				});
			},
			
			goBack() {
				uni.navigateBack();
			},
			
			showSearch() {
				uni.showToast({
					title: '搜索功能',
					icon: 'none'
				});
			},
			
			showMore() {
				uni.showToast({
					title: '更多功能',
					icon: 'none'
				});
			},
			
			onProductClick(item) {
				uni.showToast({
					title: `查看商品: ${item.title}`,
					icon: 'none'
				});
			}
		},
		
		onUnload() {
			// 页面卸载时清除定时器
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer);
			}
		}
	}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 导航栏 */
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	position: sticky;
	top: 0;
	z-index: 100;
}

.nav-left {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

/* 秒杀倒计时区域 */
.flash-countdown-section {
	background: linear-gradient(135deg, #FF4444, #FF6666);
	margin: 20rpx 30rpx;
	padding: 30rpx;
	border-radius: 15rpx;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.flash-countdown-section::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
	animation: shine 3s infinite;
}

@keyframes shine {
	0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
	100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.countdown-header {
	display: flex;
	align-items: center;
	gap: 15rpx;
	margin-bottom: 20rpx;
}

.countdown-title {
	font-size: 32rpx;
	font-weight: bold;
}

.countdown-subtitle {
	font-size: 24rpx;
	opacity: 0.9;
}

.countdown-timer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
	margin-bottom: 20rpx;
}

.time-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 15rpx 20rpx;
	border-radius: 10rpx;
	min-width: 80rpx;
	backdrop-filter: blur(10rpx);
}

.time-number {
	font-size: 36rpx;
	font-weight: bold;
}

.time-label {
	font-size: 20rpx;
	opacity: 0.8;
	margin-top: 5rpx;
}

.time-separator {
	font-size: 32rpx;
	font-weight: bold;
}

.flash-tips {
	display: flex;
	align-items: center;
	gap: 10rpx;
	justify-content: center;
}

.tips-text {
	font-size: 24rpx;
	opacity: 0.9;
}

/* 时段选择 */
.time-slots-section {
	background-color: #fff;
	margin: 0 30rpx 20rpx 30rpx;
	border-radius: 15rpx;
	padding: 20rpx;
}

.time-slots-scroll {
	width: 100%;
}

.time-slots-container {
	display: flex;
	gap: 20rpx;
	padding-right: 20rpx;
}

.time-slot-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #f5f5f5;
	border-radius: 15rpx;
	min-width: 120rpx;
	transition: all 0.3s;
}

.time-slot-item.active {
	background: linear-gradient(135deg, #FF4444, #FF6666);
	color: #fff;
}

.slot-time {
	font-size: 28rpx;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.slot-status {
	font-size: 22rpx;
}

.slot-status.active {
	color: #fff;
}

.slot-status.upcoming {
	color: #999;
}

/* 筛选区域 */
.filter-section {
	background-color: #fff;
	margin: 0 30rpx 20rpx 30rpx;
	border-radius: 15rpx;
	padding: 20rpx;
}

.filter-scroll {
	width: 100%;
}

.filter-tags {
	display: flex;
	gap: 20rpx;
	padding-right: 20rpx;
}

.filter-tag {
	padding: 15rpx 25rpx;
	background-color: #f5f5f5;
	border-radius: 25rpx;
	font-size: 26rpx;
	color: #666;
	white-space: nowrap;
	transition: all 0.3s;
}

.filter-tag.active {
	background-color: #FF4444;
	color: #fff;
}

/* 秒杀商品列表 */
.flash-products {
	padding: 0 20rpx;
}

.flash-product-item {
	background-color: #fff;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	position: relative;
}

.flash-product-item::before {
	content: '限时秒杀';
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	background: linear-gradient(135deg, #FF4444, #FF6666);
	color: #fff;
	font-size: 20rpx;
	padding: 8rpx 15rpx;
	border-radius: 20rpx;
	z-index: 10;
}

.product-img {
	width: 100%;
	height: 400rpx;
	background-color: #f8f8f8;
}

.product-info {
	padding: 20rpx;
}

.product-title {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 15rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.price-section {
	display: flex;
	align-items: center;
	gap: 10rpx;
	margin-bottom: 15rpx;
}

.flash-price {
	font-size: 36rpx;
	font-weight: bold;
	color: #FF4444;
}

.original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
}

.discount-tag {
	background-color: #FF4444;
	color: #fff;
	font-size: 20rpx;
	padding: 5rpx 10rpx;
	border-radius: 10rpx;
}

.stock-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.stock-progress {
	flex: 1;
	margin-right: 20rpx;
}

.progress-bar {
	width: 100%;
	height: 8rpx;
	background-color: #f0f0f0;
	border-radius: 4rpx;
	overflow: hidden;
	margin-bottom: 8rpx;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #FF4444, #FF6666);
	border-radius: 4rpx;
	transition: width 0.3s;
}

.stock-text {
	font-size: 22rpx;
	color: #999;
}

.buy-btn {
	background: linear-gradient(135deg, #FF4444, #FF6666);
	color: #fff;
	padding: 15rpx 30rpx;
	border-radius: 25rpx;
	font-size: 26rpx;
	font-weight: bold;
	transition: all 0.3s;
}

.buy-btn:active {
	transform: scale(0.95);
}

.buy-btn.soldout {
	background-color: #ccc;
	color: #999;
}

/* 加载更多 */
.load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rpx;
	gap: 15rpx;
}

.load-text {
	font-size: 26rpx;
	color: #999;
}
</style> 